<template>


	<view>
		<!-- 关闭按钮 -->
		<view class="icon iconfont icon-guanbi" @tap="back"></view>
		<!-- 引入背景图 -->
		<image class="loginhead" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>



		<!-- 输入框+按钮 -->
		<view class="body">

			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input type="text" v-model="username" class="uni-input common-input" placeholder="昵称/手机号/邮箱" />

				<view class="login-input-box">
					<input type="text" v-model="password" class="uni-input common-input forget-input"
						placeholder="请输入密码" />
					<view class="forget u-f-ajc login-font-color">忘记密码</view>
				</view>
			</template>


			<template v-else>
				<!-- 手机号与验证码登录  -->
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input type="text" v-model="phone" class="uni-input common-input phone-input" placeholder="手机号" />
				</view>

				<!-- 证码登录 -->
				<view class="login-input-box">
					<input type="text" v-model="checknum" class="uni-input common-input forget-input"
						placeholder="请输入验证码" />
					<view class="forget u-f-ajc login-font-color yanzhengma" @tap="getCheckNum">
						<!--  60s 倒计时 -->
						<view class="u-f-ajc">{{!codetime?'获取验证码':codetime+' s'}}</view>
					</view>
					<!-- <button type="default"  @tap="getCheckNum"  :disabled="disabled" > </button> -->
				</view>
			</template>



			<button class="user-set-btn" :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary"
				@tap="submit" :disabled="disabled">登录</button>
		</view>



		<!-- 登录状态切换 -->
		<view class="login-status u-f-ajc login-padding login-font-color" @tap="changeStatus">
			{{status?'账号密码登录':'验证码登录'}}
			<view class="icon iconfont icon-jinru login-font-color"></view>
		</view>






	</view>
</template>

<script>
	export default {

		data() {
			return {
				status: false,
				username: '', // 用户名
				password: '', // 密码
				loading: true, //按钮是否携带 loading  默认不带  true 表示加上
				disabled: false, //默认初始值
				checknum: '', //验证码
				phone: '', //手机号
				codetime: 60, // 单位秒 倒计时
				disabled1: false



			}
		},


		//生命周期 函数 
		onReady() {
			this.initInput()
		},


		methods: {
			back() {
				// 具体的实际情况去处理

				uni.navigateBack({
					delta: 1
				});
				console.log("返回上一步")
			},

			//提交登录
			submit() {


				// 提交的逻辑   
				// 1、手机号码+验证
				// 2.  密码+用户名 
				// 3.  需要分别判断  手机 是否合理 以及 用户名密码 是否正确
				// 4   如果是手机登录 需要提前获取到验证码  



				// this.isPhone() // 写到methods里面
				//  this. isPhone     // 写在计算属性里面 




				if (!this.status) { //表示 账号密码登录

					if (!this.isUser) {

						//用户名错误
						return
					}


					if (!this.isPwd) {

						//密码错误
						return
					}

					// this.username
					// this.password   获取到发送给后台





				} else { //表示手机号码 


					if (!this.isPhone) {
						alert('不合理')
						return false
					}


					// this.phone
					// this.checknum  发送给后台


				}




				console.log("提交登录")
			},







			//获取验证码方法
			getCheckNum() {

				//  第一个  input phone 是否有值  第二个 是否合理的手机正确的手机号码

				if ((this.phone.trim()).length <= 0) {
					alert('手机号码不能为空')
					return
				}

				if (!this.isPhone) {
					uni.showToast({
						title: '不是正确的手机号码'
					})

					return
				}

				//发送请求 获取验证码 
				// this.yanzhengma=res.yanzhengm

				this.checknum = '123'
				// 请求服务器，发送验证码

				// 发送成功，开启倒计时
				this.codetime = 10;

				let timer = setInterval(() => {
					this.codetime--;
					this.disabled1 = true //不能再点击


					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
						this.disabled2 = false
					}
				}, 1000);




				// if(!this.isPhone()) {
				// 	uni.showToast({
				// 		title:'不是正确的手机号码'
				// 	})

				// 	return 
				// }



			},



			// 进行 用户名与手机号码进行切换

			changeStatus() {
				this.initInput()
				this.status = !this.status

			},




			// 初始化表单
			initInput() {
				this.username = '';
				this.password = '';
				this.phone = '';
				this.checknum = '';
			}

		},

		computed: { //响应式 
			// 验证手机号码
			isPhone() {
				let mPattern = /^1[34578]\d{9}$/;
				return mPattern.test(this.phone);
			},

			//验证用户名
			isUser() {

				if ((this.username.trim()).length <= 0) {
					alert("用户名不能为空")
					return false
				}


				let mPattern = /^1[34578]\d{9}$/; //用户名的正则
				return mPattern.test(this.username);
			},


			//验证密码
			isPwd() {
				if ((this.password.trim()).length <= 0) {
					alert("密码不能为空")
					return false
				}

				let mPattern = /^1[34578]\d{9}$/; //密码的正则 
				return mPattern.test(this.password);

			}
		}

	}

	// 一个函数只处理一个逻辑 如果有多个逻辑需要同时处理的 那么写多个函数进行调用
</script>


<style>
	/* 公共按钮 */
	.user-set-btn {
		width: 100%;
		margin: 20upx 0;
		background: #FFE933 !important;
		border: 0 !important;
		color: #333333 !important;
	}

	.user-set-btn-disable {
		background: #F4F4F4 !important;
		border: 1upx solid #EEEEEE !important;
		color: #909090 !important;
	}

	.body {
		padding: 0 20upx !important;
	}

	.common-input {
		font-size: 30upx;
		border-bottom: 1upx solid #F4F4F4;
	}





	.login-font-color {
		color: #BBBBBB;
	}

	.login-padding {
		padding: 20upx 0;
	}

	.icon-guanbi {
		position: fixed;
		top: 60upx;
		left: 30upx;
		font-size: 40upx;
		font-weight: bold;
		color: #332F0A;
		z-index: 100;
	}

	.loginhead {
		width: 100%;
	}

	.other-login-title {
		position: relative;
	}

	.other-login-title:before,
	.other-login-title:after {
		content: "";
		position: absolute;
		background: #BBBBBB;
		height: 1upx;
		width: 100upx;
		top: 50%;
	}

	.other-login-title:before {
		left: 25%;
	}

	.other-login-title:after {
		right: 25%;
	}

	.login-input-box {
		position: relative;
	}

	.login-input-box .forget-input {
		padding-right: 150upx;
	}

	.login-input-box .forget,
	.login-input-box .phone {
		position: absolute;
		top: 0;
		height: 100%;
		z-index: 100;
	}

	.login-input-box .forget {
		width: 150upx;
		right: 0;
	}

	.login-input-box .phone {
		width: 100upx;
		left: 0;
		font-weight: bold;
	}

	.login-input-box .phone-input {
		padding-left: 100upx;
	}

	.yanzhengma view {
		background: #EEEEEE;
		border-radius: 10upx;
		font-size: 25upx;
		width: 150upx;
		padding: 10upx 0;
	}
</style>
